package myJs.admin.freezerSet

import myJs.Implicits._
import myJs.MyPages
import myJs.api.Api
import myJs.common.{FormGroupInlineCp, PureInputCp, PureRSelectCp}
import myJs.cps.Style
import myJs.myPkg._
import myJs.myPkg.highcharts._
import myJs.myPkg.reactHookForm._
import myJs.tool.Tool
import org.scalajs.dom.html
import org.scalajs.macrotaskexecutor.MacrotaskExecutor.Implicits._
import shared.pojo.FreezerSet.FreezerSetData
import shared.pojo.Sample._
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks.{useEffect, useState}
import slinky.core.facade.{Fragment, React}
import slinky.web.html._

import scala.scalajs.js
import scala.scalajs.js.JSON
import com.softwaremill.quicklens._

/**
 * Created by yz on 21/1/2022
 */
@react object FreezerSetCp {

  case class Props(
                    viewSamplePage: MyPages
                  )

  val component = FunctionalComponent[Props] { props =>

    val (freezerSet, setFreezerSet) = useState(FreezerSetData())

    val useForm = ReactHookForm.useForm(UseFormOptions(mode = "onChange"))

    object FTool {

      def freezerNumberChange = (v: String) => {
        val newFreezerSet = freezerSet.modify(_.freezerNumber).setTo(v)
        setFreezerSet(newFreezerSet)
      }

      def totalRowNumberChange = (v: String) => {
        val newFreezerSet = freezerSet.modify(_.totalRowNumber).setTo(v)
        setFreezerSet(newFreezerSet)
      }

      def totalColNumberChange = (v: String) => {
        val newFreezerSet = freezerSet.modify(_.totalColNumber).setTo(v)
        setFreezerSet(newFreezerSet)
      }

      def freezerLayerNumberChange = (v: String) => {
        val newFreezerSet = freezerSet.modify(_.freezerLayerNumber).setTo(v)
        setFreezerSet(newFreezerSet)
      }

      def update = () => {
        Api.freezerSet.update(freezerSet).map { x =>
          swal(SwalOptions(title = "成功", text = "更新成功", `type` = "success"))
        }
        ()
      }

      def refreshFreezerSet = {
        val options = Tool.layerOptions.copy(shade = List("0.1", "#fff"))
        val index = layer.load(0, options)
        Api.freezerSet.get(freezerSet).map { freezerSetOp =>
          val newFreezerSet = freezerSetOp.getOrElse {
            val initFreezerSet = FreezerSetData()
            freezerSet.modify(_.totalRowNumber).setTo(initFreezerSet.totalRowNumber).
              modify(_.totalColNumber).setTo(initFreezerSet.totalColNumber)
          }
          setFreezerSet(newFreezerSet)
          layer.close(index)
        }
      }

    }

    useEffect(() => {
      FTool.refreshFreezerSet
    }, List()
    )

    useEffect(() => {
      FTool.refreshFreezerSet
    }, List(freezerSet.freezerNumber, freezerSet.freezerLayerNumber)
    )

    Fragment(
      form(className := "form-horizontal", id := "form", onSubmit := {
        useForm.handleSubmit((data: js.Dictionary[js.Any]) => {
          println(JSON.stringify(data))
          FTool.update()
        })
      },

        div(className := "form-group",
          label(className := "control-label col-sm-2", "冰箱编号:"),
          div(className := "col-sm-4",
            PureRSelectCp(useForm = useForm, name = "freezerNumber", value = s"${freezerSet.freezerNumber}",
              onChange = FTool.freezerNumberChange, optionMap = Tool.freezerNumberMap
            )
          ),
          label(className := "control-label col-sm-2", "层数:"),
          div(className := "col-sm-4",
            PureRSelectCp(useForm = useForm, name = "freezerLayerNumber", value = s"${freezerSet.freezerLayerNumber}",
              onChange = FTool.freezerLayerNumberChange, optionMap = Tool.freezerLayerNumberMap
            )
          )
        ),

        FormGroupInlineCp(useForm = useForm, names = List(s"rowNumber", "colNumber"))(
          label(className := "control-label col-sm-2", "总行数:"),
          div(className := "col-sm-4",
            PureInputCp(useForm = useForm, name = s"rowNumber", value = s"${freezerSet.totalRowNumber}",
              onChange = FTool.totalRowNumberChange, registerOptions = {
                val info = "总行数"
                RegisterOptions(
                  required = ValidationValueMessage(value = true, message = s"${info}不能为空！"),
                  pattern = ValidationValueMessage(value = Tool.integerRegexp, message = s"${info}必须为整数"),
                  validate = Tool.betweenValidate(1, 50, info)
                )
              }
            ),
          ),
          label(className := "control-label col-sm-2", "总列数:"),
          div(className := "col-sm-4",
            PureInputCp(useForm = useForm, name = s"colNumber", `type` = "text", value = s"${freezerSet.totalColNumber}",
              onChange = FTool.totalColNumberChange, registerOptions = {
                val info = "总列数"
                RegisterOptions(
                  required = ValidationValueMessage(value = true, message = s"${info}不能为空！"),
                  pattern = ValidationValueMessage(value = Tool.integerRegexp, message = s"${info}必须为整数"),
                  validate = Tool.betweenValidate(1, 50, info)
                )
              })
          )
        ),

        div(className := "form-group",
          div(className := "actions col-sm-offset-2 col-sm-2",
            button(`type` := "submit", className := "btn btn-primary",
              s" 更新",
            ),
          )
        ),
      ),
    )


  }


}
